﻿<template>
  <div>
    <div id = 'workFlowShow' v-loading = 'loading' ref = 'workFlowShow'></div>
  </div>
</template>

<script>
import G6Editor from '@antv/g6-editor'
import '../workflowDefine/custom_item.js'
export default {
  data () {
    return {
      loading: false,
      // 流程图展示生成相关
      page: '',
      editor: '',
      nodeData: '',
      // 已经完成的颜色
      doneColor: '#35ce11',
      // 当前节点的颜色
      todoColor: '#ddec61'
    }
  },
  props: ['WFID', 'isShow', 'primaryKey'],
  created () {
    this.initWorkflow()
  },
  methods: {
    // 初始化流程图
    initWorkflow () {
      if (this.isShow === 'workflowInfo') {
        if (this.page) {
          this.page.destroy()
        }
        if (this.editor) {
          this.editor = ''
        }
        this.$nextTick(() => {
          this.$refs.workFlowShow.style.height = window.innerHeight / 2 + 'px'
          this.initG6Editor()
          if (this.WFID) {
            this.getWorkflowInfoByWFID()
          }
        })
      }
    },
    // 生成 G6 Editor 编辑器
    initG6Editor () {
      // const height = 300
      const height = window.innerHeight / 2
      this.editor = new G6Editor()
      this.page = new G6Editor.Flow({
        graph: {
          container: 'workFlowShow',
          height
        },
        align: {
          grid: true
        }
      })
      this.editor.add(this.page)
      // 展示网格
      this.page.showGrid()
      // editor不可编辑
      this.page._events = null
      this.page._cfg.selectable = false
      this.page._cfg.activeable = false
      // 加载对应的流程
      // this.page.read(this.nodeData)
    },
    // 根据wfid获取相应的流程信息
    getWorkflowInfoByWFID () {
      this.loading = true
      this.$basicWFPost('/WorkFlowMgr/getworkflowmaster', {
        WFID: this.WFID
      }).then(data => {
        let dataInfo = data.data.result
        if (dataInfo.code === 'failed') {
          this.loading = false
          this.$message({
            message: dataInfo.msg,
            type: 'error'
          })
        } else if (dataInfo.code === 'success') {
          if (dataInfo.data.Master.JsonData) {
            this.nodeData = JSON.parse(dataInfo.data.Master.JsonData)
            if (this.primaryKey) {
              this.getWorkflowStepsInfo()
            } else {
              this.loading = false
              this.page.read(this.nodeData)
            }
          }
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取实例和步骤数据
    getWorkflowStepsInfo () {
      this.$workflowPost('/WorkFlowEngine/InstanceSteps', {
        PrimaryKey: this.primaryKey
      }).then(data => {
        this.loading = false
        let dataInfo = data.data.result
        if (dataInfo.code === 'failed') {
          this.$message({
            message: dataInfo.msg,
            type: 'error'
          })
        } else if (dataInfo.code === 'success') {
          if (dataInfo.data.steps.length) {
            // 改变流程节点和线的样式
            let stepsArray = dataInfo.data.steps
            stepsArray.forEach(item => {
              if (item.Status === 1) {
                // 当前操作的节点
                this.changeNodeAndLineStyle(item.LineID, item.NodeID, 'todo')
              } else {
                // 该节点已经完成时，需要判断该节点是否有多人参与
                let hadUndo = false
                for (let i = 0; i < stepsArray.length; i++) {
                  // 当前节点还有其他人需要操作时
                  if (item.NodeID === stepsArray[i].NodeID && item.UserID !== stepsArray[i].UserID && stepsArray[i].Status === 1) {
                    hadUndo = true
                    break
                  }
                }
                if (hadUndo) {
                  this.changeNodeAndLineStyle(item.LineID, item.NodeID, 'todo')
                } else {
                  this.changeNodeAndLineStyle(item.LineID, item.NodeID, 'done')
                }
              }
            })
          }
          this.$nextTick(() => {
            this.page.read(this.nodeData)
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 改变流程节点和线的样式
    changeNodeAndLineStyle (lineId, nodeId, currentStatus) {
      // 修改线的颜色
      if (this.nodeData && this.nodeData.edges && this.nodeData.edges.length) {
        this.nodeData.edges.forEach((item, index) => {
          if (lineId && lineId.toLowerCase() === item.lineid) {
            item['style'] = {
              stroke: this.doneColor
            }
          }
        })
      }
      // 修改节点的颜色
      if (this.nodeData && this.nodeData.nodes && this.nodeData.nodes.length) {
        this.nodeData.nodes.forEach((item, index) => {
          if (nodeId && nodeId.toLowerCase() === item.nodeid) {
            item['style'] = {
              fill: currentStatus === 'todo' ? this.todoColor : this.doneColor
            }
          }
        })
      }
    }
  },
  watch: {
    isShow: {
      handler: function (val) {
        this.initWorkflow()
      },
      deep: true
    }
  }
}
</script>
